<template>
<div class="list xui-padding-horizontal-sm xui-padding-vertical-md xui-fc">
  <div class="list__img">
    <router-link :to="href">
      <img-box
        :width="504"
        :height="294"
        :imgSrc="item.coverUrl"
      >
      </img-box>
    </router-link>
  </div>
  <div class="list__text">
    <router-link :to="href"><h4>{{item.title}}</h4></router-link>
    <div v-if="summary">
      <p class="xui-text-truncate" v-for="(item,index) in summary" :key="index">{{item}}</p>
    </div>
    <p v-else class="xui-text-truncate-line-4">{{intro | truncate(90)}}</p>
  </div>
</div>
</template>

<script>
import ImgBox from "@/components/widge/img-box";
import { filterHTMLTag } from "@/utils";
export default {
  components: {
    "img-box": ImgBox
  },
  props: {
    item: Object,
    href: String
  },
  computed: {
    intro() {
      return filterHTMLTag(this.item.content);
    },
    summary() {
      if (!Boolean(this.item.contentSummary)) {
        return false;
      }
      return this.item.contentSummary.split("\n").slice(0, 4);
    }
  }
};
</script>

<style lang='less' scoped>
.list {
  width: 932px;
  position: relative;
  border-bottom: 1px dashed #ddd8cf;
}
.list > div {
  float: left;
}
.list .list__img {
  width: 504px;
  height: 294px;
}
.list .list__img a {
  display: block;
}
.list .list__text {
  width: calc(100% - 65px);
  position: absolute;
  top: 50%;
  right: 40px;
  margin-top: -84px;
}
.list .list__text h4 {
  font-size: 20px;
  margin-bottom: 50px;
  line-height: 1;
  color: #474747;
  font-weight: normal;
}
.list .list__text p {
  font-size: 14px;
  color: #424242;
}
</style>


